<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OSS上传Demo</title>
    <link href="/css/elementUI.css" rel="stylesheet">
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/vue.min.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/singleUpload.js"></script>
    <script src="/js/wangEditor.min.js"></script>
</head>
<body>
<div class="myApp" id="myapp">
    <div>
        <single-upload ref="singleUpload" v-model="imageUrl"></single-upload>
        文件url：{{imageUrl}}
    </div>
    <div>
        <div id="myEditor"></div>
        <el-button @click="showHtml" type="primary">预览</el-button>
        <div v-html="editorHtml"></div>
    </div>
</div>
<div>
    <input onchange="upload(this)" type="file">
</div>
<script>
    function upload(file) {
        let formData = new FormData()
        formData.append('file', $(file).prop("files")[0]);
        $.ajax({
                type: "post",
                url: "/upload",
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    console.log(res)
                }
            }
        );
    }

    new Vue({
        el: '#myapp',
        data: {
            imageUrl: '',
            editor: null,
            editorHtml: ''
        },
        created() {
            this.$nextTick(() => {
                // 注意这玩意只能在页面加载完毕后调，如果在vue的created直接调用，会导致上方工具栏失效！！！
                // 这是vue写法
                this.initWangEditor()
            })
        },
        methods: {
            initWangEditor() {
                let E = window.wangEditor;
                this.editor = new E("#myEditor");
                this.editor.config.customUploadImg = wangEditorCustomUploadImg
                this.editor.config.zIndex = 1
                this.editor.create()
                this.editor.txt.html("我是新版本")
            },
            showHtml() {
                this.editorHtml = this.editor.txt.html()
            }
        }
    })
</script>
</body>
</html>